<div >
  <div class="mat-elevation-z4 pagedescription">
    This page shows all OAuth2permissions granted in the tenant. In the Azure portal and the Microsoft documentation, these permissions are often called Delegated permissions, since they are only active when an app is actively being used by the user. These permissions can be consented to by users individually or by an admin for the whole organisation.
  </div>
      <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
  <table mat-table class="full-width-table" matSort aria-label="Elements">
    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Approval type</th>
      <td mat-cell *matCellDef="let row">{{ row.type == 'all'? 'All users':'Individual user' }}</td>
    </ng-container>
    <ng-container matColumnDef="userdisplayname">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Principal Name</th>
      <td mat-cell *matCellDef="let row"><span *ngIf="row.type != 'all'"><a [routerLink]="['/', row.type.toLowerCase()+'s', row.userid]">{{row.userdisplayname}}</a></span></td>
    </ng-container>

    <ng-container matColumnDef="sourceapplication">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Source Application (permissions recipient)</th>
      <td mat-cell *matCellDef="let row"><a [routerLink]="['/', 'serviceprincipals', row.sourcespobjectid]">{{row.sourceapplication}}</a> </td>
    </ng-container>

    <ng-container matColumnDef="targetapplication">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Target Application (permission to access)</th>
      <td mat-cell *matCellDef="let row"><a class="md-accent" [routerLink]="['/', 'serviceprincipals', row.targetspobjectid]">{{row.targetapplication}}</a> </td>
    </ng-container>

    <ng-container matColumnDef="scope">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Scope (permissions)</th>
      <td mat-cell *matCellDef="let row">{{row.scope}} </td>
    </ng-container>

    <ng-container matColumnDef="expiry">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Expiry</th>
      <td mat-cell *matCellDef="let row">{{row.expiry}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[50, 100, 500, 1000, 5000]"></mat-paginator>
</div>
<router-outlet></router-outlet>
